<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
    <div class="content">
        <div class="split edit">
          <div id="container" style="height:100%"></div>
        </div>
        <div class="split view">Sample Data</div>
    </div>
    <script src="https://unpkg.com/split.js/dist/split.min.js"></script>
    <script src="https://unpkg.com/monaco-editor@latest/min/vs/loader.js"></script>
    <link href='./editor.css' rel='stylesheet'>
    <script>
      Split(['.edit', '.view'], {
        gutterSize: 1,
        sizes: [40,60]
      });


      require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@latest/min/vs' }});
      // window.MonacoEnvironment = { getWorkerUrl: () => proxy };
      /*
      let proxy = URL.createObjectURL(new Blob([`
        self.MonacoEnvironment = {
          baseUrl: 'https://unpkg.com/monaco-editor@latest/min/'
        };
        importScripts('https://unpkg.com/monaco-editor@latest/min/vs/base/worker/workerMain.js');
      `], { type: 'text/javascript' }));
      */
      require(["vs/editor/editor.main"], function () {
        let editor = monaco.editor.create(document.getElementById('container'), {
          value: 
`openapi: 3.0.0
info:
  version: 1.0.0
  title: Collapsible Tags
paths:
`,
          language: 'yaml',
          theme: 'vs-dark',
          minimap: { enabled: false}
        });
      });
      

    </script>
    </body>
</html>